<script setup lang="ts">
import type { Ref } from 'vue'
import type { EChartsOption } from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { useECharts } from '@/hooks/useECharts'
import { storeToRefs } from 'pinia'
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes'
import echarts from '@/utils/echarts'

const { isTagViewCurrenFull } = storeToRefs(useTagsViewRoutes())

// 统计图
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>)

watch(
  () => isTagViewCurrenFull.value,
  () => {
    setTimeout(resize, 300)
  }
)

onMounted(() => {
  const option: EChartsOption = {
    title: {
      text: '政策补贴额度',
      textStyle: { fontSize: 15 }
    },
    grid: { top: 70, right: 20, bottom: 30, left: 30 },
    tooltip: { trigger: 'axis' },
    legend: { data: ['预购队列', '最新成交价'], right: 0 },
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: [
      {
        type: 'value',
        name: '价格',
        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } }
      }
    ],
    series: [
      {
        name: '预购队列',
        type: 'line',
        symbolSize: 6,
        symbol: 'circle',
        smooth: true,
        data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
        lineStyle: { color: '#fe9a8b' },
        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#fe9a8bb3' },
            { offset: 1, color: '#fe9a8b03' }
          ])
        }
      },
      {
        name: '最新成交价',
        type: 'line',
        symbolSize: 6,
        symbol: 'circle',
        smooth: true,
        data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
        lineStyle: { color: '#9E87FF' },
        itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#9E87FFb3' },
            { offset: 1, color: '#9E87FF03' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                { offset: 0, color: '#9E87FF' },
                { offset: 0.4, color: '#9E87FF' },
                { offset: 0.5, color: '#fff' },
                { offset: 0.7, color: '#fff' },
                { offset: 0.8, color: '#fff' },
                { offset: 1, color: '#fff' }
              ]
            },
            borderColor: '#9E87FF',
            borderWidth: 2
          }
        }
      }
    ]
  }
  setOptions(option)
})
</script>

<template>
  <div style="height: 100%" ref="chartRef"></div>
</template>
